import React, {Component} from "react";
import {StyleSheet, View, Animated, Image, Dimensions, BackHandler, ToastAndroid, StatusBar} from "react-native";
import {StackNavigator, TabNavigator, TabBarBottom} from "react-navigation";
import SplashScene from "./SplashScene";
import SelectScene from "./select/SelectScene";
import CourseScene from "./course/CourseScene";
import OrderScene from "./order/OrderScene";
import MineScene from "./mine/MineScene";
import LoginScene from "./mine/login/LoginScene";
import color from "../util/color";
import {CustomAnimation} from "react-native-tabbar-animated";
export default class Root extends Component {

    constructor() {
        super()
        StatusBar.setBarStyle('light-content')
    }

    render() {
        return (
            <View style={{flex:1}}>
                <Navigator/>
            </View>
        );
    }
}

const Tab = TabNavigator(
    {
        Home: {
            screen: SelectScene,
            navigationOptions: ({navigation}) => ({
                tabBarLabel: '选课',
                tabBarIcon: ({tintColor, focused}) =>
                    ( focused ? <CustomAnimation animationStyle={'spring'} junpTime={3000}
                                                 imageAddress={require('../../res/img/tabbar/select_class_press.png')}/>
                            :
                            <Image source={ require('../../res/img/tabbar/select_class_normal.png')  }
                                   style={{tintColor: color.gray,width:25,height:25}}
                            />
                    )
            }),
        },
        Nearby: {
            screen: CourseScene,
            navigationOptions: ({navigation}) => ({
                tabBarLabel: '我的课程',
                tabBarIcon: ({tintColor, focused}) =>
                    ( focused ? <CustomAnimation animationStyle={'spring'} junpTime={3000}
                                                 imageAddress={require('../../res/img/tabbar/class_list_press.png')}/>
                            :
                            <Image source={ require('../../res/img/tabbar/class_list_normal.png')  }
                                   style={{tintColor: color.gray,width:25,height:25}}
                            />
                    )
            }),
        },
        Order: {
            screen: OrderScene,
            navigationOptions: ({navigation}) => ({
                tabBarLabel: '订单',
                tabBarIcon: ({tintColor, focused}) =>
                    ( focused ? <CustomAnimation animationStyle={'spring'} junpTime={3000}
                                                 imageAddress={require('../../res/img/tabbar/dingdan_press.png')}/>
                            :
                            <Image source={ require('../../res/img/tabbar/dingdan_normal.png')  }
                                   style={{tintColor: color.gray,width:25,height:25}}
                            />
                    )
            }),
        },

        Mine: {
            screen: MineScene,
            navigationOptions: ({navigation}) => ({
                tabBarLabel: '我的',
                tabBarIcon: ({tintColor, focused}) =>
                    ( focused ? <CustomAnimation animationStyle={'spring'} junpTime={3000}
                                                 imageAddress={require('../../res/img/tabbar/mine_press.png')}/>
                            :
                            <Image source={ require('../../res/img/tabbar/mine_normal.png')  }
                                   style={{tintColor: color.gray,width:25,height:25}}
                            />
                    )
            }),
        },
    }, {
        tabBarComponent: TabBarBottom,
        tabBarPosition: 'bottom',
        lazy: true,
        animationEnabled: false,
        swipeEnabled: false,
        tabBarOptions: {
            activeTintColor: color.primary,
            inactiveTintColor: color.gray,
            style: {backgroundColor: '#ffffff'},
        },
    }
)

const Navigator = StackNavigator(
    {
        splash: {screen: SplashScene},
        home: {screen: Tab},
        selectScene: {screen: SelectScene},
        courseScene: {screen: CourseScene},
        mineScene: {screen: MineScene},
        loginScene: {screen: LoginScene},
    },
    {
        navigationOptions: {
            headerBackTitle: null,
            showIcon: true,
            header: null,
            headerTitleStyle: {
                fontSize: 20,
                fontWeight: 'bold',
            },
        },
    }
)
